<template>
  <!--style="width: calc(100% - 100px); height: calc(100% - 55px);"-->
  <!-- 弹出框 -->
  <a-modal
    :title="title"
    :visible="visible"
    width="100%"
    destroyOnClose
    :class="'jeecg-online-modal'"
    :bodyStyle="bodyStyle"
    style="top: 0px"
    :footer="null"
    @cancel="handleModalCancel"
  >
    <a-tabs defaultActiveKey="1" tabPosition="left">
       <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="file-text" />
          <span>单据信息</span>
        </span>
        <div class="component_div" :style="formBodyStyle">
          <template v-if="isComp">
            <dynamic-link :path="path" :formData="formData" @ok="valForm" @initFlowParam="initFlowParam"></dynamic-link>
          </template>
          <template v-else>
            <iframe :src="iframeUrl" frameborder="0" width="100%" :height="height" scrolling="auto"></iframe>
          </template>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="user" />
          <span>任务处理</span>
        </span>
        <div class="component_div" :style="formBodyStyle">
          <task-module ref="task" :formData="formData" :isValFormRes="isValForm" @complete="completeProcess"> </task-module>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3">
        <span slot="tab">
          <a-icon type="sliders" />
          <span>流程图</span>
        </span>
        <process-module :formData="formData" :style="formBodyStyle"></process-module>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import TaskModule from './form/TaskModule'
  import ProcessModule from './form/ProcessModule'
  import {httpAction} from '@/api/manage'
  import DynamicLink from './form/DynamicLink.vue'
  import {isURL} from '@/utils/validate'
  import {ACCESS_TOKEN} from '@/store/mutation-types'

  export default {
  name: 'TaskDealModal',
  components: {
    DynamicLink,
    TaskModule,
    ProcessModule,
  },
  props: ['path', 'formData'],
  computed: {
    isComp: function () {
      var TOKEN = Vue.ls.get(ACCESS_TOKEN)
      var DOMAIN_URL = window._CONFIG['domianURL']
      var TASKID = this.formData.taskDefKey
      var URL = (this.path || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
      console.log('isComp组件名称：', URL)
      if (isURL(URL)) {
        this.iframeUrl = URL
        return false
      }
      return true
    },
  },
  data() {
    return {
      isValForm: '1',
      loading: false,
      flowParam: {},
      title: '流程',
      visible: false,
      bodyStyle: {
        padding: '0',
        height: window.innerHeight - 80 + 'px',
        'overflow-y': 'auto',
      },
      formBodyStyle: {
        padding: "0",
        height:(window.innerHeight-120)+"px",
        "overflow-y":"auto"
      },
      height: window.innerHeight - 120 + 'px',
      iframeUrl: '',
    }
  },
  created() {},
  methods: {
    initFlowParam(param){
      this.flowParam = param
      console.log("流程参数:",param)
    },
    valForm() {
       this.isValForm = '0'
    },
    // 关闭模态框
    handleModalCancel() {
      this.visible = false
    },
    deal(data) {
      this.visible = true
    },
    completeProcess(e) {
      const that = this
      const val = e
      if (this.$refs.public && this.$refs.public.$children &&
        this.$refs.public.$children[0].synSubmitForm && this.formData.extendUrlParams.edit == 1) {
        this.$refs.public.$children[0]
          .synSubmitForm()
          .then(() => {
            that.httpModel(val)
          })
          .catch(() => {
            console.log('流程异常，请联系管理员')
          })
      } else {
        that.httpModel(val)
      }
    },
    httpModel(val) {
      // 添加流程参数
      this.$set(val.model,'dataId', this.flowParam.dataId)
      this.$set(val.model,'beanName', this.flowParam.beanName)
      this.$set(val.model,'flowCode', this.flowParam.flowCode)
      this.$set(val.model,'formUrl', this.flowParam.formUrl)
      this.$set(val.model,'formUrlMobile', this.flowParam.formUrlMobile)
      console.log("任务处理参数:",val)
      const that = this
      that.$refs.task.showLoading()
      //先去掉上一个组件里的方法，成功回调后再调请求
      if (!val.url) {
        that.$refs.task.hideLoading()
        this.visible = false
        this.$emit('ok')
      } else {
        httpAction(val.url, val.model, val.model.method).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.$refs.task.hideLoading()
            this.visible = false
            this.$emit('ok')
          } else {
            that.$message.warning('流程异常，请联系管理员')
          }
        })
      }
    },
  },
  mounted() {
    console.log(this.path, '21')
  },
}
</script>

<style lang="less" scoped>
.ant-tabs-left-content {
  padding-top: 10px !important;
}

.component_div {
  margin-top: 5px;
  margin-bottom: 5px;
}

// 兼容1.6.2版本的antdv全屏
/deep/ .ant-modal {
  top: 0;
  padding: 0;
}
</style>